<template>
  <div>
    <editForm :formConfig="formConfig" ref="basicForm" :formData="formData">
      <template #packageCode="{ editFormInfo }">
        <el-input
          v-model="editFormInfo.packageCode"
          size="mini"
          class="input-with-select input-link"
          readonly
          :disabled="true"
          placeholder="请选择工单"
          @click.native="showPlanPackage(editFormInfo)"
        ></el-input>
      </template>
      <template #issueCode="{ editFormInfo }">
        <el-input
          v-model="editFormInfo.issueCode"
          size="mini"
          class="input-with-select input-link"
          readonly
          :disabled="true"
          placeholder="请选择工单"
          @click.native="showOrder(editFormInfo)"
        ></el-input>
      </template>
    </editForm>
  </div>
</template>

<script>
export default {
  props: {
    allInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    unEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      show: false,
      isDelete: false,
      disabled: false,
      formConfig: {
        labelWidth: "140px",
        itemArr: [
          {
            label: "设备管理单位",
            prop: "deptManageName", //多选时，字段要为数组类型
            propArr: "deptArr",
            idsStr: "deptManage",
            //level: "3",
            multiple: false, //是否多选
            allowCreate: false, //是否允许创建条目
            option: [], //this.deptOption
            type: "dept-select", //类型
            trigger: "change",
            methods: (data, formData) => {
              this.clearEquipments();
              //this.autoCreateTitle()
            },
            span: 6,
            required: true,
          },
          {
            label: "设备名称",
            prop: "equipmentName",
            //propArr: "equipmentArr",
            idsStr: "equipmentId",
            filterConfig: ["filterManagerUnit"],
            managerUnit: [],
            multiple: true, //是否多选
            //allowCreate: false, //是否允许创建条目
            //option: [], //this.deptOption
            type: "device", //类型
            trigger: "change",
            beforeMethod: (formData, item) => {
              if (formData.deptManageName && formData.deptManageName != "") {
                item.managerUnit = [formData.deptManage];
                return true;
              } else {
                this.$message.warning("请先选择设备管理单位");
                return false;
              }
            },
            methods: (data, formData) => {
              let arr = data.map((item) => {
                const obj = {
                  equipmentId: item.id,
                  equipmentName: item.name,
                };
                return obj;
              });
              this.$refs.basicForm.setFormItem("equipments", arr);
              this.autoCreateTitle();
            },
            required: true,
            disabled: false,
            span: 6,
            rows: 2,
          },
          {
            label: "计划起止时间",
            prop: "planStartTime",
            type: "datetimerange",
            required: true,
            disabled: false,
            span: 6,
            methods: (val) => {
              let timers = new Date(val[0]).getTime() - 7 * 24 * 60 * 60 * 1000;
              let remindTime = this.$utils.TimeFormat(timers, 3);
              this.$refs.basicForm.setFormItem("startTime", val[0]);
              this.$refs.basicForm.setFormItem("endTime", val[1]);
              this.$refs.basicForm.setFormItem("remindTime", remindTime);
            },
          },
          {
            label: "提醒时间",
            prop: "remindTime",
            type: "datetime",
            isHide: false,
            disabled: false,
            required: true,
            min: 0,
            span: 6,
          },
          {
            label: "计划包编号",
            prop: "packageCode",
            type: "text",
            isHide: true,
            disabled: false,
            required: true,
            min: 0,
            span: 6,
          },
          {
            label: "工单编号",
            prop: "issueCode",
            type: "text",
            isHide: true,
            disabled: false,
            required: true,
            min: 0,
            span: 6,
          },
          {
            label: "工作内容",
            prop: "content",
            type: "textarea",
            required: true,
            span: 24,
            rows: 6,
            methods: () => {
              this.autoCreateTitle();
            },
          },
          {
            label: "备注",
            prop: "desc",
            type: "textarea",
            disabled: false,
            span: 24,
            rows: 6,
          },
        ],
      },
      formData: {},
      searchData: {},
      attachSetting: {},
    };
  },
  created() {
    if (this.unEdit) {
      this.formConfig.itemArr.map((i) => {
        i.disabled = true;
      });
    }
  },
  watch: {
    allInfo: {
      handler(val) {
        this.init(val);
      },
    },
    unEdit: {
      handler(val) {
        if (val) {
          this.formConfig.itemArr.map((i) => {
            i.disabled = true;
          });
        } else {
          this.formConfig.itemArr.map((i) => {
            i.disabled = false;
          });
        }
      },
    },
  },
  // mounted() {
  //   setTimeout(() => {
  //     this.init(this.allInfo);
  //   }, 100);
  // },
  methods: {
    //初始化函数
    init(val) {
      let data = JSON.parse(JSON.stringify(val));
      if (data.packageCode) {
        this.formConfig.itemArr[4].isHide = false;
      }
      if (data.status > 2) {
        this.formConfig.itemArr[5].isHide = false;
      }
      data.planStartTime = [data.startTime, data.endTime];
      let deptOption = [
          {
            label: data.deptManageName,
            value: data.deptManage,
            id: data.deptManage,
            name: data.deptManageName,
          },
        ];
        setTimeout(() => {
          this.$refs.basicForm.setItemOption("deptManageName", deptOption);
          this.$refs.basicForm.setFormItem("deptArr", data.deptManage);
        }, 100);
      if (data.equipments) {
        data.equipmentName = data.equipments
          .map((i) => i.equipmentName)
          .join(", ");
        data.equipmentId = data.equipments.map((i) => i.equipmentId).join(", ");
        let equipmentOption = data.equipments.map((i) => {
          let obj = {
            label: i.equipmentName,
            value: i.equipmentId,
            id: i.equipmentId,
            name: i.equipmentName,
          };
          return obj;
        });
        let equipmentArr = data.equipments.map((i) => i.equipmentId); 
        this.$refs.basicForm.setItemOption("equipmentName", equipmentOption);
        setTimeout(() => {
          this.$refs.basicForm.setFormItem("equipmentArr", equipmentArr);
        }, 100);
      }
      this.formData = data;
    },
    //自动创建标题
    autoCreateTitle() {
      let form = this.$refs.basicForm.getCurrentData();
      let title = `${form.deptManageName || ""}${form.equipmentName || ""}`;
      this.$emit("producedTitle", title);
    },
    //展示检修计划包
    showPlanPackage(row) {
      this.goDetailPage(row.packageId, "overhaulPlanPackageDetail", "detail");
    },
    //展示工单
    showOrder(row) {
      this.goDetailPage(row.issueId, "planRepairDetails", "edit");
    },
    //改变设备管理单位后清空设备
    clearEquipments() {
      this.$refs.basicForm.setFormItem("equipmentName", "");
      this.$refs.basicForm.setFormItem("equipmentId", "");
      this.$refs.basicForm.setFormItem("equipments", []);
      this.autoCreateTitle();
    },
    //跳转到详情页
    goDetailPage(id, router, type) {
      const { href } = this.$router.resolve({
        name: router,
        query: {
          id: id ? id : "",
          pageType: type ? type : "",
        },
      });
      window.open(href, "_blank");
    },
    async getBasicInfo() {
      let formData = await this.$refs.basicForm.getFormData();
      return formData;
    },
  },
};
</script>

<style lang="less" scoped>
.upload-file {
  margin: 0 0 10px 20px;
  text-align: left;
  display: flex;
  span {
    margin-right: 10px;
  }
}
.input-link /deep/.el-input__inner {
  cursor: pointer;
  color: royalblue;
}
</style>